<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>首页</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="../../resources/css/mui.css">
    <link rel="stylesheet" href="../../resources/css/style.css">
    <link rel="stylesheet" href="../../resources/css/product/pdp.css">
    <script src="../../resources/assets/mui.js"></script>
    <script src="../../resources/assets/avalon.js"></script>
    <script src="../../resources/assets/jquery-2.0.3.min.js"></script>
    <script src="../../resources/assets/mui.zoom.js"></script>
    <script src="../../resources/assets/mui.previewimage.js"></script>
    <script src="../../resources/js/lang/en.js"></script>
    <script src="../../resources/js/dahua.config.js"></script>
    <script src="../../resources/js/common.js"></script>
    <script src="../../resources/js/product/pdp.js"></script>

</head>

<body ms-controller="pdpPage">

    <!--头部-->
    <input type="hidden" value="" id="uid" />
    <header class="mui-bar mui-bar-nav header">
        <h1 id="title" class="mui-title">{product.partnumber}</h1>
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left mui-icon-white"></a>
        <!-- <a href="history.back()" class="mui-icon mui-icon-left-nav mui-pull-left mui-icon-white"></a> -->
        <!-- <a class="mui-icon mui-icon-left-nav mui-pull-left mui-icon-white" href="../product/listtest.html?todo=1"></a> -->
        <a class="mui-icon mui-pull-right share" href="#sharePopover">
            <i class="icon icon_share"></i>
        </a>
        <a class="mui-icon mui-pull-right collection" href="javascript:void(0);">
            <i class="icon icon_star"></i>
        </a>
    </header>

    <div id="scroll" class="mui-content mui-scroll-wrapper">
        <div class="mui-scroll">
            <div class="mui-row">
                <ul class="mui-table-view mui-grid-view">
                    <li class="mui-table-view-cell mui-media mui-col-xs-6">
                        <img class="mui-media-object product pd_sm" ms-attr="{src: @product.image}" onerror="imgError(this)">
                    </li>
                    <li class="mui-table-view-cell mui-media mui-col-xs-6">
                        <div class="mui-media-body pd_name">
                            {product.productName}
                        </div>
                    </li>
                </ul>
            </div>

            <ul class="mui-table-view" style="margin-top: 5px;">
                <li class="mui-table-view-cell mui-media">
                    <div class="mui-media-body" style="font-weight:bold;font-size:15px;">
                        Online Resource
                    </div>
                </li>
                <li class="mui-table-view-cell mui-media" style="height: 40px;" ms-class="{'mui-hidden': (product.url=='')}">
                    <a class="mui-pull-right web" ms-attr="{href:product.url}" style="color:#1059cc;">Product page</a>
                    <div class="mui-media-body">
                        Web
                    </div>
                </li>
                <li class="mui-table-view-cell mui-media" ms-class="{'mui-hidden': (datasheet=='')}">
                    <a class="mui-pull-right datasheet" ms-attr="{href:datasheet}">
                        <img class="mui-pull-right" src="../../resources/images/download.jpg">
                    </a>
                    <div class="mui-media-body">
                        Datasheet
                    </div>
                </li>
            </ul>
            <ul class="mui-table-view" style="margin-top: 5px;">
                <li class="mui-table-view-cell ">
                    <div class="mui-row">
                        <div class="mui-segmented-control mui-segmented-control-inverted">
                            <a class="mui-control-item mui-active" href="#description">
									Product Description
								</a>
                            <a class="mui-control-item" href="#specifications">
									Specifications
								</a>
                        </div>
                        <div class="mui-row">
                            <div id="description" class="mui-control-content mui-active" style="padding-top: 10px;">
                            </div>
                            <div id="specifications" class="mui-control-content" style="margin-top: 10px;">
                            </div>
                        </div>
                    </div>

                </li>

            </ul>

        </div>

    </div>

    <div id="toolsPopover" class="mui-popover popover-height popover" style="height: 150px; width: 150px;">
        <div class="mui-popover-arrow"></div>
        <div class="mui-scroll-wrapper">
            <div class="mui-scroll">
                <ul class="mui-table-view">
                    <li class="mui-table-view-cell">
                        Add to favorites
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <div id="sharePopover" class="mui-popover">
        <div class="mui-popover-arrow"></div>
        <div class="mui-scroll-wrapper">
            <div class="mui-scroll">
                <ul class="mui-table-view shares">
                    <li class="mui-table-view-cell">
                        <a href="#emailShare">Email</a>
                    </li>
                    <li class="mui-table-view-cell">
                        <a href="#whatsappShare">WhatsApp</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <div id="emailShare" class="mui-popover mui-popover-action mui-popover-center">
        <div class="mui-popup mui-popup-in" style="display: block;">
            <div class="mui-popup-inner mui-share-inner">
                <div class="mui-popup-text">
                    <form :validate="@validateSendMail" id="sendMailForm">

                        <input type="hidden" ms-attr="{'value': @product.partnumber+'('+@product.productName+')'}" name="title" id="shareTitle" />
                        <input type="hidden" ms-attr="{'value': @product.image}" name="img" id="img" />

                        <div class="mui-input-row">
                            <input id="email" placeholder="Input an e-mail address" name="email" class="mui-input-clear m-b-6" type="text" ms-duplex="@email" ms-rules="{required: true,email: true}" data-required-message="The email is required!" data-email-message="The email is not a valid email address!">
                        </div>
                        <div class="mui-input-row">
                            <textarea id="content" name="content" rows="3" placeholder="Input e-mail subject" ms-duplex="@content" ms-rules="{required: true,maxlength:256}" data-required-message="The subject is required!" data-maxlength-message="The subject must be  less than 256 characters long!">
								</textarea>
                        </div>
                    </form>
                </div>
            </div>
            <div class="mui-popup-buttons">
                <a class="mui-popup-button" href="#emailShare">Cancel</a>
                <a class="mui-popup-button mui-popup-button-bold" :click="@sendMail">Send</a>
            </div>
        </div>
    </div>


    <div id="whatsappShare" class="mui-popover mui-popover-action mui-popover-center">
        <div class="mui-popup mui-popup-in" style="display: block;">
            <div class="mui-popup-inner mui-share-inner">
                <div class="mui-popup-text">
                    <div class="mui-input-row mui-text-left" style="padding-bottom: 10px;">
                        【{product.partnumber}<span style="padding-left: 4px;">{product.productName}</span>】
                        <p class="mui-ellipsis" style="margin-bottom: 0px;">{product.url} </p>
                        Tap on the link to open in browser.
                    </div>
                </div>
            </div>
            <div class="mui-popup-buttons">
                <a class="mui-popup-button" href="#whatsappShare">Cancel</a>
                <a class="mui-popup-button mui-popup-button-bold whatsappSend">OK</a>
            </div>
        </div>
    </div>

    <!--底部导航
		<footer class="mui-bar mui-bar-tab footer">
			<a id="defaultTab" data-id="1" class="mui-tab-item mui-active" href="category.html">
				<span class="mui-icon icon icon_product active"></span>
				<span class="mui-tab-label">Product</span>
			</a>
			<a class="mui-tab-item" href="../solution/category.html">
				<span class="mui-icon icon icon_solution"></span>
				<span class="mui-tab-label">Solution</span>
			</a>
			<a id="partner" class="mui-tab-item mui-hidden" href="javascript:void(0);">
				<span class="mui-icon icon icon_partner"></span>
				<span class="mui-tab-label">Partner</span>
			</a>
			<a class="mui-tab-item" href="../user/user.html">
				<span class="mui-icon icon icon_usercenter"></span>
				<span class="mui-tab-label">User Center</span>
			</a>
		</footer>
		-->
</body>

</html>